<template>
    <div id="terminal" ref="terminal"></div>
  </template>
  <script>
  import { Terminal } from "xterm"
  import { FitAddon } from 'xterm-addon-fit'
  import "xterm/css/xterm.css"
  import Stomp from 'stompjs'
  export default {
    data() {
      return {
        deploy_id :this.$route.query.id,
        term: "", // 保存terminal实例
        rows: 40,
        cols: 100,
        stompClient: ''
      }
    },
    mounted() {
      this.initSocket()
    },
    methods: {
      initXterm() {
        let _this = this
        let term = new Terminal({
          rendererType: "canvas", //渲染类型
          rows: _this.rows, //行数
          cols: _this.cols, // 不指定行数，自动回车后光标从下一行开始
          convertEol: true, //启用时，光标将设置为下一行的开头
          // scrollback: 50, //终端中的回滚量
          disableStdin: false, //是否应禁用输入
          // cursorStyle: "underline", //光标样式
          cursorBlink: true, //光标闪烁
          theme: {
            foreground: "#ECECEC", //字体
            background: "#000000", //背景色
            cursor: "help", //设置光标
            lineHeight: 20
          }
        })
        // 创建terminal实例
        term.open(this.$refs["terminal"])
        // 换行并输入起始符 $
        // term.prompt = _ => {
        //   term.write("\r\n\x1b[33m$\x1b[0m ")
        // }
        // term.prompt()
        // canvas背景全屏
        const fitAddon = new FitAddon()
        term.loadAddon(fitAddon)
        fitAddon.fit()
  
        window.addEventListener("resize", resizeScreen)
        function resizeScreen() {
          try {
            fitAddon.fit()
          } catch (e) {
            console.log("e", e.message)
          }
        }
        _this.term = term
        _this.runFakeTerminal()
      },
      runFakeTerminal() {
        let term = this.term
        if (term._initialized) return
        // 初始化
        term._initialized = true
        term.writeln("Welcome to \x1b[1;32m墨天轮\x1b[0m.")
        term.writeln('This is Web Terminal of Modb; Good Good Study, Day Day Up.')
        term.prompt()
        term.onData(key => {  // 输入与粘贴的情况
          this.sendShell(key)
        })
      },
      initSocket() {
        let _this = this
        // 建立连接对象
        let sockUrl = 'ws://192.168.5612:8081/admin/ws/webssh/deploy/'+ this.deploy_id
        let socket = new WebSocket(sockUrl)
        // 获取STOMP子协议的客户端对象
        _this.stompClient = Stomp.over(socket)
        // 向服务器发起websocket连接
        this.stompClient.connect({}, (res) => {
            console.log("res",res)
            _this.initXterm()
            _this.stompClient.subscribe('/topic/1024', (frame) => {
            _this.writeShell(frame.body)
          })
          _this.sentFirst()
        }, (err) => {
          console.log('失败：' + err)
        })
        _this.stompClient.debug = null
      },
      sendShell (data) {
        let _bar = {
          operate:'command',
          command: data
        }
        this.stompClient.send('/msg', {}, JSON.stringify(_bar))
      },
      writeShell(data) {
        this.term.write(data)
      },
      // 连接建立，首次发送消息连接 ssh
      sentFirst () {
        let _bar = {
          operate:'connect',
          host: '***',
          port: 22,
          username: '***',
          password: '***',
          userId: 1024
        }
        this.stompClient.send('/msg', {}, JSON.stringify(_bar))
      }
    }
  }
  </script>